<template>
  <div class="vm-common-statistics">
    <!-- 采购金额 -->
    <div class="saa-num-wrap">
      <h6 class="saa-num-title">
        <div class="saa-num-title-l">
          <i class="saa-icon saa-cgc"></i>采购金额（万元）
        </div>
      </h6>
      <div id="purchase-money"></div>
    </div>

    <!-- 合同数量 -->
    <div class="saa-num-wrap">
      <h6 class="saa-num-title">
        <div class="saa-num-title-l">
          <i class="saa-icon saa-cont"></i>合同数量（单）
        </div>
      </h6>
      <div id="contract-number"></div>
    </div>

    <!-- 物料采购Top5 -->
    <div class="saa-num-wrap">
      <h6 class="saa-num-title">
        <div class="saa-num-title-l">
          <i class="saa-icon saa-mater"></i>物料采购Top5（万元）
        </div>
        <div class="saa-num-title-r">
          <popup-picker
            :data="list"
            v-model="value"
            @on-change="onChange"></popup-picker>
          <x-icon type="ios-arrow-down" size="20"></x-icon>
        </div>
      </h6>
      <div id="materiel-purchase"></div>
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import {PopupPicker, Group} from 'vux'
  import {source_purchaseData, source_purchasing} from '@/api/statistics_analysis'
  import {getCurMonth, getCountDays} from '@/utils/vm-common-getTime.js'

  export default {
    data() {
      return {
        charts: new Array(), // 所有echarts实例
        arrMonth: new Array(), // 月份
        arrMoney: new Array(), // 金额
        arrList: new Array(), // 数量
        arrWzname: new Array(), // 物资名称
        arrPrice: new Array(), // 物资价格
        month: [{month: '一月', value: 1, isActive: false},
          {month: '二月', value: 2, isActive: false},
          {month: '三月', value: 3, isActive: false},
          {month: '四月', value: 4, isActive: false},
          {month: '五月', value: 5, isActive: false},
          {month: '六月', value: 6, isActive: false},
          {month: '七月', value: 7, isActive: false},
          {month: '八月', value: 8, isActive: false},
          {month: '九月', value: 9, isActive: false},
          {month: '十月', value: 10, isActive: false},
          {month: '十一月', value: 11, isActive: false},
          {month: '十二月', value: 12, isActive: false}],
        value: [`${getCurMonth()}月`],
        list: [['1月','2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']]
      }
    },
    mounted() {
      this.getAllData(); // 获取所有的数据
      this.getchartsChangeresize();
    },
    components: {
      PopupPicker,
      Group
    },
    methods: {
      // 改变状态
      async onChange (money) {
        let currentMoney = money.join().replace('月','');
        let startTime = getCountDays(currentMoney,1,1);
        let endTime = getCountDays(currentMoney,2,1);
        source_purchasing(startTime, endTime).then(data => {
          let datal = data.data.data;
          this.arrWzname = [];
          this.arrPrice = [];
          if (datal.length) {
            datal.forEach(item => {
              this.arrWzname.push(item.wzname);
              this.arrPrice.push(`${item.price}`);
            });
          }
          this.getMaterielPurchase(this.arrWzname, this.arrPrice); // 物料采购数据
        })
      },
      async getAllData() {
        let startTime = getCountDays(getCurMonth(), 1, 1);
        let endTime = getCountDays(getCurMonth(), 2, 1);
        await source_purchaseData().then(data => {
          var datal = data.data.data;
          let arrMonth = this.arrMonth,
            arrMoney = this.arrMoney,
            arrList = this.arrList;
          datal.forEach(item => {
            arrMonth.push(`${item.month}月`);
            arrMoney.push(item.money);
            arrList.push(item.num);
          })
        });
        await source_purchasing(startTime, endTime).then(data => {
          let datal = data.data.data,
            arrWzname = this.arrWzname,
            arrPrice = this.arrPrice;
          datal.forEach(item => {
            arrWzname.push(item.wzname);
            arrPrice.push(item.price);
          })
        });
        this.getPurchaseMoney(this.arrMonth, this.arrMoney); // 金额数量
        this.getContractNumber(this.arrMonth, this.arrList); // 合同数量
        this.getMaterielPurchase(this.arrWzname, this.arrPrice); // 物料采购数据
      },
      // 采购金额
      getPurchaseMoney(arrMonth, arrMoney) {
        let purchaseMoneyO = echarts.init(document.getElementById('purchase-money'));
        arrMoney = arrMoney.map(item => {
          return Number(item);
        });
        purchaseMoneyO.setOption({
          backgroundColor: '#f4f4f4',
          grid: {
            left: 50
          },
          legend: {
            borderColor: 'pink'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: [{
            data: arrMonth,
            splitLine: {show: true},
            axisTick: {
              alignWithLabel: true
            },
          }],
          yAxis: [{
            splitLine: {show: true},
          }],
          series: [
            {
              type: 'line',
              showSymbol: false,
              data: arrMoney
            }
          ],
        });
        this.charts.push(purchaseMoneyO);
      },
      // 合同数量
      getContractNumber(arrMonth, arrList) {
        let contractNumberO = echarts.init(document.getElementById('contract-number'));
        contractNumberO.setOption({
          tooltip: {
            trigger: 'axis'
          },
          backgroundColor: '#f4f4f4',
          xAxis: [{
            data: arrMonth,
            splitLine: {show: true},
            axisTick: {
              alignWithLabel: true
            },
          }],
          yAxis: [{
            splitLine: {show: true}
          }],
          series: [{
            type: 'line',
            showSymbol: false,
            data: arrList
          }]
        });
        this.charts.push(contractNumberO);
      },
      // 物料采购
      getMaterielPurchase(arrWzname, arrPrice) {
        let meterielO = echarts.init(document.getElementById('materiel-purchase'));
        let colors = ["#fbc156", "#da4577", "#6157a8", "#94cc38", "#b596b8"];
        var option = {
          color: colors,
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: 50,
            bottom: 50
          },
          xAxis: [
            {
              type: 'category',
              data: arrWzname,
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
                show: true,
                formatter: function (value, index) {
                  return value.split('').join('\n');
                },
                textStyle: {
                  color: '#929292',
                  fontSize: '0.293333rem'
                }
              },
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '',
              type: 'bar',
              barWidth: '60%',
              data: arrPrice,
              itemStyle: {
                normal: {
                  color: function ({dataIndex}) {
                    return colors[dataIndex];
                  }
                }
              }
            }
          ]
        }
        meterielO.clear();
        meterielO.setOption(option);
        this.charts.push(meterielO);
      },
      getchartsChangeresize() {
        window.addEventListener('resize', () => {
          this.charts.forEach(item => {
            item.resize();
          })
        });
      }
    }
  }
</script>

<style lang="scss" scoped>


  .saa-num-wrap {
    margin-top: 0.533333rem;
    background-color: #F4F4F4;
    padding: 0.266666rem;
    .saa-num-title {
      border-bottom: 1px solid #E5E5E5;
      height: 0.826666rem;
      line-height: 0.826666rem;
      font-size: 0.4rem;
      color: #818181;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .saa-num-title-l {
        display: flex;
        align-items: center;
      }
      .saa-num-title-r {
        display: flex;
        align-items: center;
      }
      .saa-cgc {
        background-position: 0 0;
        width: 0.466666rem;
        height: 0.466666rem;
        margin-right: 0.266666rem;
      }
      .saa-cont {
        background-position: -0.066666rem -0.506666rem;
        width: 0.373333rem;
        height: 0.453333rem;
        margin-right: 0.266666rem;
      }
      .saa-mater {
        background-position: 0 -1.453333rem;
        width: 0.453333rem;
        height: 0.48rem;
        margin-right: 0.266666rem;
      }
      .saa-company {
        background-position: 0 -1.0rem;
        width: 0.506666rem;
        height: 0.426666rem;
        margin-right: 0.266666rem;
      }
    }
    #purchase-money,
    #contract-number,
    #CompanyPurchaseBox {
      width: 100%;
      height: 436px;
    }
    #materiel-purchase {
      width: 100%;
      height: 500px;
    }
  }

  /* 采购分析模块 */
  .vm-common-statistics {
    font-size: 22px;
    padding: 0 35px 40px 35px;
  }
</style>
